<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true">
      <!-- <el-form-item>
                    <treeselect v-model="queryParams.adCode" :options="xzqhOptions" :normalizer="normalizer"
                        :show-count="true" placeholder="行政区划" />
            </el-form-item>-->
      <el-form-item>
        <el-date-picker
          v-model="queryParams.yy"
          size="small"
          value-format="yyyy"
          type="year"
          placeholder="请选择（年）"
          :picker-options="pickerOptions"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="选择测站">
        <el-select
          v-model="queryParams.statCd"
          size="small"
          @change="selectGet"
          placeholder="请选择测站"
        >
          <el-option
            v-for="item in stList"
            :key="item.statNm"
            :label="item.statNm"
            :value="item.statCd"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
      </el-form-item>
    </el-form>

    <div class="tb_title">{{ stNameTitle }}{{ detailTime }}年逐日水量表</div>
    <div class="tb_dw">单位：<span>万m³</span></div>

    <div class="zj_item" v-loading="loading">
      <div class="item_top_tj">
        <div class="it_zy">
          <div class="iz_num">{{ allycount }}</div>
          <!-- <div class="iz_wz" >اندازه فیری ایپتفاه مقدار （دفتر ）</div> -->
          <div class="iz_wz">年供水天数（天）</div>
        </div>
      </div>
      <div class="item_top_tj">
        <div class="it_zy">
          <div class="iz_num">{{ yavg }}</div>
          <!-- <div class="iz_wz" >طبیعی دویدن （دفتر ）</div> -->
          <div class="iz_wz">年平均日水量（m³）</div>
        </div>
      </div>
      <div class="item_top_tj">
        <div class="it_zy">
          <div class="iz_num">{{ ymax }}</div>
          <!-- <div class="iz_wz" >جۇدا قىلماق خط （دفتر ）</div> -->
          <div class="iz_wz">最大日水量（m³）/ {{ yDatemax }}</div>
        </div>
      </div>
      <div class="item_top_tj">
        <div class="it_zy">
          <div class="iz_num">{{ ymin }}</div>
          <!-- <div class="iz_wz" >جۇدا قىلماق خط （دفتر ）</div> -->
          <div class="iz_wz">最小日水量（m³）/ {{ yDatemin }}</div>
        </div>
      </div>
    </div>

    <div id="swtable" v-loading="loading"></div>
  </div>
</template>

<script>
import { listnzrysl, getxzqh } from "@/api/measurement/waterstatistics";
import { listStStationB } from "@/api/datam/StStationB";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
  name: "watermonitor",
  components: { Treeselect },
  dicts: ["sys_chan_level"],
  data() {
    return {
      // 行政区划树选项
      xzqhOptions: [],
      // 遮罩层
      loading: true,
      // 岗位表格数据
      wmList: [],
      stList: [],
      stNameTitle: "",
      detailTime: "",
      // 查询参数
      queryParams: {
        statCd: "",
        yy: "",
        stName: undefined,
      },
      ymax: 0,
      ymin: 0,
      yavg: 0,
      allycount: 0,
      allyv: 0,
      yDatemax: "",
      yDatemin: "",
      tableData: [],
      spanArr: [],
      pos: 0,
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      },
    };
  },
  created() {
    let rq = new Date();
    this.queryParams.yy = rq.getFullYear() + "";
    //this.getTreeselect();
    this.getStName();
  },
  mounted() {
    this.loadtable();
  },
  methods: {
    getStName() {
      //this.loading = true;
      listStStationB(this.queryParams).then((response) => {
        let rp = response.rows;
        this.stList = rp;
        this.queryParams.statCd = rp[0].statCd;
        this.selectGet(rp[0].statCd);
        this.getList();
        //this.loading = false;
      });
    },
    //下拉框选中事件
    selectGet(vId) {
      //这个vId也就是value值
      let obj = {};
      obj = this.stList.find((item) => {
        //这里的userList就是上面遍历的数据源
        return item.statCd === vId; //筛选出匹配数据
      });
      this.stNameTitle = obj.statNm + "-";
    },
    loadtable() {
      var nrhtml =
        '<table><tr class="tsback" style="height: 60px;" >' +
        "   <td>日/月</td>" +
        "   <td>1月</td>" +
        "   <td>2月</td>" +
        "   <td>3月</td>" +
        "   <td>4月</td>" +
        "   <td>5月</td>" +
        "   <td>6月</td>" +
        "   <td>7月</td>" +
        "   <td>8月</td>" +
        "   <td>9月</td>" +
        "   <td>10月</td>" +
        "   <td>11月</td>" +
        "   <td>12月</td>" +
        "</tr>";
      for (let i = 1; i <= 31; i++) {
        nrhtml += "<tr>";

        nrhtml += '<td class="tsback" >' + i + "</td>";
        nrhtml +=
          "   <td id=d01_" +
          i +
          ">0</td>" +
          "   <td id=d02_" +
          i +
          ">0</td>" +
          "   <td id=d03_" +
          i +
          ">0</td>" +
          "   <td id=d04_" +
          i +
          ">0</td>" +
          "   <td id=d05_" +
          i +
          ">0</td>" +
          "   <td id=d06_" +
          i +
          ">0</td>" +
          "   <td id=d07_" +
          i +
          ">0</td>" +
          "   <td id=d08_" +
          i +
          ">0</td>" +
          "   <td id=d09_" +
          i +
          ">0</td>" +
          "   <td id=d10_" +
          i +
          ">0</td>" +
          "   <td id=d11_" +
          i +
          ">0</td>" +
          "   <td id=d12_" +
          i +
          ">0</td>";
        nrhtml += "</tr>";
      }

      nrhtml += '<tr><td class="tsback" >月供水天数</td>';
      nrhtml +=
        '<td id="mc1">0</td>' +
        '   <td id="mc2">0</td>' +
        '   <td id="mc3">0</td>' +
        '   <td id="mc4">0</td>' +
        '   <td id="mc5">0</td>' +
        '   <td id="mc6">0</td>' +
        '   <td id="mc7">0</td>' +
        '   <td id="mc8">0</td>' +
        '   <td id="mc9">0</td>' +
        '   <td id="mc10">0</td>' +
        '   <td id="mc11">0</td>' +
        '   <td id="mc12">0</td>';
      nrhtml += "</tr>";

      nrhtml += '<tr><td class="tsback" >月平均水量</td>';
      nrhtml +=
        '<td id="mavg1">0</td>' +
        '   <td id="mavg2">0</td>' +
        '   <td id="mavg3">0</td>' +
        '   <td id="mavg4">0</td>' +
        '   <td id="mavg5">0</td>' +
        '   <td id="mavg6">0</td>' +
        '   <td id="mavg7">0</td>' +
        '   <td id="mavg8">0</td>' +
        '   <td id="mavg9">0</td>' +
        '   <td id="mavg10">0</td>' +
        '   <td id="mavg11">0</td>' +
        '   <td id="mavg12">0</td>';
      nrhtml += "</tr>";

      nrhtml += '<tr><td class="tsback" >最高日水量</td>';
      nrhtml +=
        '<td id="mmax1">0</td>' +
        '   <td id="mmax2">0</td>' +
        '   <td id="mmax3">0</td>' +
        '   <td id="mmax4">0</td>' +
        '   <td id="mmax5">0</td>' +
        '   <td id="mmax6">0</td>' +
        '   <td id="mmax7">0</td>' +
        '   <td id="mmax8">0</td>' +
        '   <td id="mmax9">0</td>' +
        '   <td id="mmax10">0</td>' +
        '   <td id="mmax11">0</td>' +
        '   <td id="mmax12">0</td>';
      nrhtml += "</tr>";

      nrhtml += '<tr><td class="tsback" >发生日期</td>';
      nrhtml +=
        '<td id="mDatemax1"></td>' +
        '   <td id="mDatemax2"></td>' +
        '   <td id="mDatemax3"></td>' +
        '   <td id="mDatemax4"></td>' +
        '   <td id="mDatemax5"></td>' +
        '   <td id="mDatemax6"></td>' +
        '   <td id="mDatemax7"></td>' +
        '   <td id="mDatemax8"></td>' +
        '   <td id="mDatemax9"></td>' +
        '   <td id="mDatemax10"></td>' +
        '   <td id="mDatemax11"></td>' +
        '   <td id="mDatemax12"></td>';
      nrhtml += "</tr>";

      nrhtml += '<tr><td class="tsback" >最低日水量</td>';
      nrhtml +=
        '<td id="mmin1">0</td>' +
        '   <td id="mmin2">0</td>' +
        '   <td id="mmin3">0</td>' +
        '   <td id="mmin4">0</td>' +
        '   <td id="mmin5">0</td>' +
        '   <td id="mmin6">0</td>' +
        '   <td id="mmin7">0</td>' +
        '   <td id="mmin8">0</td>' +
        '   <td id="mmin9">0</td>' +
        '   <td id="mmin10">0</td>' +
        '   <td id="mmin11">0</td>' +
        '   <td id="mmin12">0</td>';
      nrhtml += "</tr>";

      nrhtml += '<tr><td class="tsback" >发生日期</td>';
      nrhtml +=
        '<td id="mDatemin1"></td>' +
        '   <td id="mDatemin2"></td>' +
        '   <td id="mDatemin3"></td>' +
        '   <td id="mDatemin4"></td>' +
        '   <td id="mDatemin5"></td>' +
        '   <td id="mDatemin6"></td>' +
        '   <td id="mDatemin7"></td>' +
        '   <td id="mDatemin8"></td>' +
        '   <td id="mDatemin9"></td>' +
        '   <td id="mDatemin10"></td>' +
        '   <td id="mDatemin11"></td>' +
        '   <td id="mDatemin12"></td>';
      nrhtml += "</tr>";

      nrhtml += '<tr><td class="tsback" rowspan="3" >年度统计</td>';
      nrhtml +=
        '<td colspan="3" >年总供水天数</td>' +
        '   <td colspan="3"  id="allycount"></td>' +
        '   <td colspan="3" >年平均日水量</td>' +
        '   <td colspan="3"  id="yavg"></td>';
      nrhtml += "</tr>";

      nrhtml +=
        '<tr><td colspan="3" >年最大日水量</td>' +
        '   <td colspan="3" id="ymax"></td>' +
        '   <td colspan="3" >发生日期</td>' +
        '   <td colspan="3" id="yDatemax"></td>';
      nrhtml += "</tr>";

      nrhtml +=
        '<tr><td colspan="3" >年最小日水量</td>' +
        '   <td colspan="3" id="ymin"></td>' +
        '   <td colspan="3" >发生日期</td>' +
        '   <td colspan="3" id="yDatemin"></td>';
      nrhtml += "</tr>";

      nrhtml += "</table>";
      document.getElementById("swtable").innerHTML = nrhtml;
    },
    /** 查询行政区域下拉树结构 */
    getTreeselect() {
      getxzqh().then((response) => {
        this.xzqhOptions = this.handleTree(response.data, "adCode", "upAdCode");
      });
    },
    /** 查询测站列表 */
    getList() {
      if (this.stNameTitle == "" || this.stNameTitle == null) {
        this.$message.error("请先选择测站");
        return;
      }
      let that = this;
      this.loading = true;
      listnzrysl(this.queryParams).then((response) => {
        this.loadtable();
        let that = this;
        this.loading = true;
        let alll = response.data.alllist;
        let qtime = "";
        if (this.queryParams.yy == "" || this.queryParams.yy == undefined) {
          qtime = new Date();
          that.detailTime = that.dealWithTime(qtime);
        } else {
          qtime = this.queryParams.yy;
          that.detailTime = qtime;
        }

        if (alll) {
          for (let i = 0; i < alll.length; i++) {
            document.getElementById("d" + alll[i].statMark).innerText =
              alll[i].dayVol;
          }
          for (let i = 1; i < 13; i++) {
            document.getElementById("mc" + i).innerText =
              response.data["l" + i].days;
            document.getElementById("mavg" + i).innerText =
              response.data["l" + i].mavg;
            document.getElementById("mmax" + i).innerText =
              response.data["l" + i].mmax;
            document.getElementById("mmin" + i).innerText =
              response.data["l" + i].mmin;
            document.getElementById("mDatemin" + i).innerText =
              response.data["l" + i].mDatemin;
            document.getElementById("mDatemax" + i).innerText =
              response.data["l" + i].mDatemax;
          }

          that.ymax = response.data.ymax;
          that.ymin = response.data.ymin;
          that.yavg = response.data.yavg;
          that.allycount = response.data.allycount;
          that.allyv = response.data.allyv;
          that.yDatemax = response.data.yDatemax;
          that.yDatemin = response.data.yDatemin;
          document.getElementById("ymax").innerText = that.ymax;
          document.getElementById("ymin").innerText = that.ymin;
          document.getElementById("yavg").innerText = that.yavg;
          document.getElementById("yDatemax").innerText = that.yDatemax;
          document.getElementById("allycount").innerText = that.allycount;
          document.getElementById("yDatemin").innerText = that.yDatemin;
        }

        /**数据拆分
         * */
        this.loading = false;
      });
    },
    dealWithTime(data) {
      let Y = data.getFullYear();
      return Y;
    },
    /** 转换菜单数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.adCode,
        label: node.adName,
        children: node.children,
      };
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.zj_item {
  width: 100%;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .it_zy {
    display: inline-block;
    text-align: center;
  }
  .item_top_tj {
    display: inline-flex;
    width: 23.5%;
    min-width: 300px;
    padding: 25px 0;
    background: #f7fbfe;
    align-items: center;
    justify-content: center;
  }
  .iz_num {
    font-size: 32px;
    font-weight: 500;
  }
  .iz_wz {
    font-size: 15px;
    color: #8a8b8d;
  }
}

::v-deep #swtable {
  min-width: 600px;
  min-height: 300px;
  margin: 0px auto;
  margin-top: 30px;
  .tsback {
    background: #f8f8f9;
  }
  table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    table-layout: fixed;
  }

  table,
  tr,
  td {
    border: 1px solid #dfe6ec;
  }

  td {
    text-align: center;
    height: 50px;
    position: relative;
  }

  td[class="first"] {
    width: 150px;
  }

  td[class="first"]:before {
    content: "";
    position: absolute;
    width: 1px;
    height: 152px;
    top: 27px;
    left: 0;
    background-color: #dfe6ec;
    display: block;
    transform: rotate(-78deg);
    transform-origin: top;
    -ms-transform: rotate(-78deg);
    -ms-transform-origin: top;
  }

  td[class="first"]:after {
    content: "";
    position: absolute;
    width: 1px;
    height: 114px;
    top: 0;
    left: 55px;
    background-color: #dfe6ec;
    display: block;
    transform: rotate(-58deg);
    transform-origin: top;
    -ms-transform: rotate(-58deg);
    -ms-transform-origin: top;
  }
}

.tb_title {
  width: 430px;
  text-align: center;
  margin: 5px auto;
  margin-bottom: 15px;
  font-weight: 700;
}

.tb_dw {
  font-size: 13px;
  position: absolute;
  top: 90px;
  right: 40px;
  span {
    color: #349edf;
  }
}

.el-form-item--medium .el-form-item__content {
  line-height: 30px;
}

.vue-treeselect__placeholder,
.vue-treeselect__single-value {
  line-height: 30px;
}

.vue-treeselect {
  width: 215px;
  height: 30px;
  .vue-treeselect__control {
    height: 30px;
    .el-form-item--medium .el-form-item__content {
      line-height: 30px;
      .vue-treeselect__placeholder,
      .vue-treeselect__single-value {
        line-height: 30px;
      }
    }
  }
}
</style>
